Introduction to CSS
CSS (Cascading Style Sheets) is used to style HTML elements.
Types of CSS
Inline CSS
This paragraph is styled using inline CSS.
<p style="color: blue; font-weight: bold;">This paragraph is styled using inline
CSS.</p>
Internal CSS
This section is styled using internal CSS within the <style> tag.
<style>
p {
color: green;
}
</style>
External CSS
External CSS is written in a separate file and linked to HTML.
<link rel="stylesheet" href="styles.css">
CSS Properties Examples
Box Model
Standard Box
width: 200px;
height: 100px;
border: 2px solid #333;
Border Radius
Rounded Box
border-radius: 15px;
Box Shadow
Box with Shadow
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
Color Properties Examples
Text Color
This text is red.
color: red;
Background Color
This box has a yellow background.
background-color: yellow;
Border Color
This box has a blue border.
border: 2px solid blue;
Gradient Background
This box has a gradient background.
background: linear-gradient(to right, red, orange);
color: white;
Text Manipulation Examples
Text Transform
This text is transformed to uppercase.
text-transform: uppercase;
Text Alignment
This text is centered.
text-align: center;
Letter Spacing
This text has increased letter spacing.
letter-spacing: 3px;
Word Spacing
This text has increased word spacing.
word-spacing: 10px;
Line Height
This text has increased line height for better readability.
line-height: 2;
Text Font
This text has a different font.
font-family: "Times New Roman";
Table Manipulation Examples
Styling Table Borders
| Name |
Age |
Country |
| John |
25 |
USA |
| Maria |
30 |
Canada |
| Alex |
22 |
UK |
.border-table {
border: 2px solid black;
border-collapse: collapse;
}
.border-table th, .border-table td {
padding: 10px;
border: 1px solid #ddd;
}
Table Header Styling
.header-table th {
background-color: #4CAF50;
color: white;
text-align: center;
}
.header-table td {
text-align: center;
}
Alternating Row Colors
| Name |
Age |
Country |
| John |
25 |
USA |
| Maria |
30 |
Canada |
| Alex |
22 |
UK |
.alternate-rows tr:nth-child(even) {
background-color: #f2f2f2;
}
.alternate-rows td {
padding: 8px;
}
Hover Effect on Rows
| Name |
Age |
Country |
| John |
25 |
USA |
| Maria |
30 |
Canada |
| Alex |
22 |
UK |
.hover-effect tr:hover {
background-color: #ddd;
}
Table with Responsive Design
| Name |
Age |
Country |
| John |
25 |
USA |
| Maria |
30 |
Canada |
| Alex |
22 |
UK |
.table-wrapper {
overflow-x: auto;
max-width: 100%;
}
.responsive-table {
width: 100%;
border-collapse: collapse;
}
.responsive-table th, .responsive-table td {
padding: 12px;
border: 1px solid #ddd;
}
Sizing and Spacing Examples
Width Example
This box has a width of 50%.
width: 50%;
background-color: lightgreen;
Height Example
This box has a height of 150px.
height: 150px;
background-color: lightcoral;
Padding Example
This box has 30px padding.
padding: 30px;
background-color: lightyellow;
Margin Example
This box has 30px margin.
margin: 30px;
background-color: lightblue;